<!--
 * @Description: 
 * @Author: mmzhang
 * @Date: 2022-07-13 13:42:20
 * @LastEditTime: 2023-01-05 17:16:43
-->
<template>
  <dt-modal-info ref="info" :title="title">
    <div class="flex flex-horizontal-end ">
      <Button type="primary" @click="onDownLoadAll" v-if="canDownLoad && (images.length || files.length)">下载全部附件</Button>
    </div>
    <div class="image-content">
      <p class="title">图片附件（{{images.length}}个）</p>
      <div class="flex image-style" v-if="images.length">
        <div v-for="(item,index) in images" :key="index"
          class="small-img hand position-relative" :style="{'width':'100px','height':'100px'}">
          <img :src="item.url" class="img-show"
            :style="{'width':'100px','height':'100px'}">
          <div class="list-cover flex flex-vertical-center">
            <Icon type="ios-eye-outline" :size="22" @click.native="onPreviewImg(index)">
            </Icon>
          </div>
        </div>
      </div>
    </div>
    <div class="image-content">
      <p class="title">文件附件（{{files.length}}个）</p>
      <div style="max-height:300px;overflow-y:scroll;"  v-if="files.length">
        <div v-for="(item,index) in files" :key="index">
          <p class="process" @click="onDownloadFile(item)">{{item.name}}</p>
        </div>
      </div>
    </div>
    <preview-image :images="previewImg" :showDownLoad="canDownLoad" :showIndex="previewIndex"
      ref="preViewImage">
    </preview-image>
  </dt-modal-info>
</template>
<script>
  import enclosureImg from '@/components/enclosureImg.vue'
  import toolMgr from '@/biz/base/tool.js'
  import dt from '@dt/dt'
  export default {
    props: {
      title: String
    },
    data() {
      return {
        images: [],
        files: [],
        previewImg: [],
        previewIndex: 0,
        canDownLoad: false
      }
    },
    components: {
      enclosureImg
    },
    methods: {
      show(opt) {
        this.canDownLoad = opt.canDownLoad
        this.images = opt.images
        this.files = opt.files
        
        this.$refs.info.show()
      },
      onPreviewImg(index) {
        this.previewImg = this.images.map(item => {
          return item.url
        })
        this.previewIndex = index
        this.$refs.preViewImage.show()
      },
      onDownLoadAll() {
        this.$emit('downLoadAll')
      },
      onDownloadFile(item) {
        if (!this.canDownLoad) {
          this.$Message.info('无下载权限！')
          return false
        }
        toolMgr.downloadFile(item.url, item.name)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .image-content {
    .title {
      margin-top: 10px;
      line-height: 30px;
    }

    .process {
      color: #2d8cf0;
      cursor: pointer;
    }

    .text {
      padding: 10px 0;
      color: #333;
    }

    .image-style {
      overflow-x: auto;
      overflow-y: hidden;
    }

    .list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
      justify-content: space-around;
    }

    .small-img {
      margin-right: 10px;
    }

    .small-img:hover .list-cover {
      display: flex;
    }

    .list-cover i {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
    }

    .desc-content {
      margin-left: 50px;
    }
  }
</style>